<!DOCTYPE html>
<html lang="zh" class="js csstransforms3d">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Hugo 0.93.0" />
    <meta name="description" content="Documentation for Hugo Learn Theme">
<meta name="author" content="Mathieu Cornic">

    <link rel="icon" href="/images/favicon.png" type="image/png">

    <title>JS对象拷贝 :: welcome to my blog</title>

    
    <link href="/css/nucleus.css?1648731304" rel="stylesheet">
    <link href="/css/fontawesome-all.min.css?1648731304" rel="stylesheet">
    <link href="/css/hybrid.css?1648731304" rel="stylesheet">
    <link href="/css/featherlight.min.css?1648731304" rel="stylesheet">
    <link href="/css/perfect-scrollbar.min.css?1648731304" rel="stylesheet">
    <link href="/css/auto-complete.css?1648731304" rel="stylesheet">
    <link href="/css/atom-one-dark-reasonable.css?1648731304" rel="stylesheet">
    <link href="/css/theme.css?1648731304" rel="stylesheet">
    <link href="/css/tabs.css?1648731304" rel="stylesheet">
    <link href="/css/hugo-theme.css?1648731304" rel="stylesheet">
    
    <link href="/css/theme-green.css?1648731304" rel="stylesheet">
    
    

    <script src="/js/jquery-3.3.1.min.js?1648731304"></script>

    <style>
      :root #header + #content > #left > #rlblock_left{
          display:none !important;
      }
      
    </style>
    
  </head>
  <body class="" data-url="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/">
    <nav id="sidebar" class="showVisitedLinks">



  <div id="header-wrapper">
    <div id="header">
      <a id="logo" href='/'>

<svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100%" height="100%"  viewBox="0 0 285.1 69.9" xml:space="preserve">
<g>
	<path d="M35,0c9.6,0,17.9,3.4,24.7,10.3c6.8,6.8,10.3,15,10.3,24.7c0,9.7-3.4,17.9-10.3,24.7c-6.8,6.8-15,10.3-24.7,10.3
		c-9.7,0-17.9-3.4-24.7-10.3C3.4,52.8,0,44.6,0,34.9c0-9.6,3.4-17.9,10.3-24.7C17.1,3.4,25.3,0,35,0z M22.3,63.7
		c0.3-7.4,0.3-14.7,0-22.1c-2.1-0.4-4-0.4-5.9,0c-0.2,0.8-0.2,2.5-0.1,4.9c0.1,2.3,0,3.9-0.3,4.8c-1.7-0.6-2.7-2.1-3.1-4.6
		c-0.1-0.7-0.1-3.3-0.1-8c0-14.5-0.1-23-0.3-25.6c-3.6,4.1-5.6,7-5.9,8.5v10.9c0,4.5,0.1,8.1,0.2,10.9c0,0.4,0,1.3-0.1,2.8
		c-0.1,1.2,0,2.1,0.1,2.6c0.1,0.6,1.1,2.1,2.8,4.7C13.2,58.7,17.5,62.2,22.3,63.7z M44.6,65.4c0.3-5,0.2-12.9-0.1-23.6
		c-2.1-0.3-4.1-0.3-5.9,0c-0.2,2-0.2,5.1-0.1,9.5c0.1,4.3,0,7.5-0.1,9.5c-2.9,0.4-5,0.3-6.2-0.1c-0.2-5.6-0.2-15.2-0.1-28.7
		c0.1-12.4,0-21.8-0.3-28.3c-2.4,0.1-4.3,0.6-5.7,1.3c-0.1,7.7-0.2,17.7-0.1,30.1c0,16.5,0,26.6,0,30.3c2.3,1.1,5.4,1.7,9.4,1.7
		C38.9,66.9,42.1,66.4,44.6,65.4z M48.1,64.1c9.7-4.6,15.7-12,18-22.2c-1.8-0.2-3.8-0.3-6.1-0.3c-1.6,3.9-2.6,6.3-3.2,7.2
		c-1.1,1.7-2,2.5-2.7,2.5C54,46,54,39.1,54,30.5c0-11.5,0-18.4,0-20.9c-1.4-1.4-3.3-2.5-5.7-3.4C48.1,6.3,48,6.4,48,6.7
		c0,3.5,0,13.1,0,28.8C47.9,47.2,48,56.8,48.1,64.1z"/>
</g>
<g>
	<path d="M116.6,51.3h-29c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.6-0.7-1c-0.2-0.4-0.2-0.8-0.2-1.3V16.3h6.3
		V45h25.8V51.3z"/>
	<path d="M154.8,51.3h-22.9c-0.9,0-1.8-0.2-2.9-0.5c-1-0.3-2-0.8-2.9-1.5c-0.9-0.7-1.6-1.6-2.2-2.8c-0.6-1.1-0.9-2.5-0.9-4.2V19.5
		c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2h28.6v6.3h-25.4v19.8
		c0,0.8,0.2,1.5,0.7,1.9s1.1,0.7,1.9,0.7h22.9V51.3z M151.9,37h-20v-6.4h20V37z"/>
	<path d="M197.3,51.3H191v-8.6h-22.3v8.6h-6.3V33.8c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.7-5.5c1.6-1.5,3.4-2.8,5.5-3.6
		c2.1-0.9,4.5-1.3,7-1.3h14.3c0.4,0,0.9,0.1,1.2,0.2c0.4,0.2,0.7,0.4,1,0.7s0.5,0.6,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2V51.3z
		 M168.7,36.4H191V22.6h-11.2c-0.2,0-0.6,0-1.2,0.1c-0.6,0.1-1.4,0.2-2.2,0.4c-0.8,0.2-1.7,0.6-2.6,1c-0.9,0.5-1.8,1.1-2.5,2
		c-0.8,0.8-1.4,1.9-1.9,3.1c-0.5,1.2-0.7,2.8-0.7,4.5V36.4z"/>
	<path d="M241.7,28.1c0,1.4-0.2,2.7-0.5,3.9c-0.4,1.1-0.8,2.1-1.5,3c-0.6,0.9-1.3,1.6-2.1,2.2c-0.8,0.6-1.6,1.1-2.5,1.5
		c-0.9,0.4-1.8,0.7-2.6,0.9c-0.9,0.2-1.7,0.3-2.5,0.3l13.3,11.5h-9.8l-13.2-11.5h-4.6v-6.3H230c0.8-0.1,1.5-0.2,2.2-0.5
		c0.7-0.3,1.2-0.6,1.7-1.1c0.5-0.5,0.9-1,1.1-1.6c0.3-0.6,0.4-1.4,0.4-2.2v-4c0-0.4,0-0.6-0.1-0.8c-0.1-0.2-0.2-0.3-0.3-0.4
		c-0.1-0.1-0.3-0.1-0.4-0.2c-0.2,0-0.3,0-0.4,0h-20.9v28.7h-6.3V19.5c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1
		c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2H234c1.4,0,2.6,0.3,3.6,0.8s1.8,1.2,2.4,1.9c0.6,0.8,1,1.6,1.3,2.5
		c0.3,0.9,0.4,1.7,0.4,2.5V28.1z"/>
	<path d="M285.1,48.6c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.7-0.7,1c-0.3,0.3-0.6,0.5-1,0.7c-0.4,0.2-0.8,0.2-1.2,0.2
		c-0.4,0-0.8-0.1-1.2-0.2c-0.4-0.1-0.8-0.4-1.1-0.7l-23.2-24.2v24.7h-6.3V19c0-0.7,0.2-1.2,0.5-1.8c0.4-0.5,0.8-0.9,1.4-1.2
		c0.6-0.2,1.2-0.3,1.9-0.2s1.2,0.4,1.6,0.9l23.2,24.2V16.3h6.3V48.6z"/>
</g>
</svg>

</a>

    </div>
    
        <div class="searchbox">
    <label for="search-by"><i class="fas fa-search"></i></label>
    <input data-search-input id="search-by" type="search" placeholder="">
    <span data-search-clear=""><i class="fas fa-times"></i></span>
</div>

<script type="text/javascript" src="/js/lunr.min.js?1648731304"></script>
<script type="text/javascript" src="/js/auto-complete.js?1648731304"></script>
<script type="text/javascript">
    
        var baseurl = "\/";
    
</script>
<script type="text/javascript" src="/js/search.js?1648731304"></script>

    
  </div>
  

    <div class="highlightable">
    <ul class="topics">

        
          
          




 
  
    
    <li data-nav-id="/javascript/" title="— JavaScript" class="dd-item
        parent
        
        
        ">
      <a href="/javascript/">
          <b>1. </b>— JavaScript
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/" title="JS定时器应用" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/">
          JS定时器应用
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/ajax/" title="Ajax简单介绍" class="dd-item
        
        
        
        ">
      <a href="/javascript/ajax/">
          Ajax简单介绍
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/" title="JS对象拷贝" class="dd-item
        parent
        active
        
        ">
      <a href="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/">
          JS对象拷贝
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/" title="JS中的内存机制" class="dd-item
        
        
        
        ">
      <a href="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/">
          JS中的内存机制
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" title="JS遍历方法总结" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/">
          JS遍历方法总结
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/node.js/" title="— Node.js" class="dd-item
        
        
        
        ">
      <a href="/node.js/">
          <b>2. </b>— Node.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/node.js/koa%E5%9F%BA%E7%A1%80/" title="Koa创建本地服务器" class="dd-item ">
        <a href="/node.js/koa%E5%9F%BA%E7%A1%80/">
        Koa创建本地服务器
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/" title="Nunjucks模板引擎常用基础" class="dd-item ">
        <a href="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/">
        Nunjucks模板引擎常用基础
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/nodemailer/" title="Nodemailer实现邮箱注册" class="dd-item
        
        
        
        ">
      <a href="/node.js/nodemailer/">
          Nodemailer实现邮箱注册
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/" title="Node博客系统开发记录" class="dd-item
        
        
        
        ">
      <a href="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/">
          Node博客系统开发记录
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node-%E7%88%AC%E8%99%AB/" title="Node爬虫思路整理" class="dd-item
        
        
        
        ">
      <a href="/node.js/node-%E7%88%AC%E8%99%AB/">
          Node爬虫思路整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/cookiesession%E5%BA%94%E7%94%A8/" title="cookie,session实现登录验证" class="dd-item
        
        
        
        ">
      <a href="/node.js/cookiesession%E5%BA%94%E7%94%A8/">
          cookie,session实现登录验证
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/token%E5%AE%9E%E4%BE%8B/" title="Egg.js: token应用实例" class="dd-item
        
        
        
        ">
      <a href="/node.js/token%E5%AE%9E%E4%BE%8B/">
          Egg.js: token应用实例
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/cookie-%E5%92%8C-session/" title="koa应用cookie,session实例" class="dd-item ">
        <a href="/node.js/cookie-%E5%92%8C-session/">
        koa应用cookie,session实例
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/vue/" title="— Vue.js" class="dd-item
        
        
        
        ">
      <a href="/vue/">
          <b>3. </b>— Vue.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/vue/vue2.0%E8%B5%B7%E6%AD%A5/" title="vue基础入门" class="dd-item ">
        <a href="/vue/vue2.0%E8%B5%B7%E6%AD%A5/">
        vue基础入门
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结" class="dd-item ">
        <a href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/">
        vue组件传值总结
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/vue/vuerouter/" title="VueRouter常用点整理" class="dd-item
        
        
        
        ">
      <a href="/vue/vuerouter/">
          VueRouter常用点整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/web/" title="— Web About" class="dd-item
        
        
        
        ">
      <a href="/web/">
          <b>4. </b>— Web About
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/web/indexeddb/" title="IndexedDB数据库常用函数封装" class="dd-item
        
        
        
        ">
      <a href="/web/indexeddb/">
          IndexedDB数据库常用函数封装
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/web/url%E5%A4%84%E7%90%86/" title="URL手动处理" class="dd-item
        
        
        
        ">
      <a href="/web/url%E5%A4%84%E7%90%86/">
          URL手动处理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/myimg/" title="— 杂 感 . . ." class="dd-item
        
        
        
        ">
      <a href="/myimg/">
          <b>5. </b>— 杂 感 . . .
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/myimg/myimage/" title="Myimages" class="dd-item
        
        
        
        ">
      <a href="/myimg/myimage/">
          Myimages
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
        
    </ul>

    
    
      <section id="shortcuts">
        <h3></h3>
        <ul>
          
              <li>
                  <a class="padding" href="https://gitee.com/wen-yun-li"><i class='fab fa-fw fa-github'></i> — Gitee</a>
              </li>
          
              <li>
                  <a class="padding" href="https://github.com/liwenyun"><i class='fab fa-fw fa-github'></i> — GitHub</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.runoob.com/"><i class='fas fa-fw fa-bookmark'></i>— 菜鸟教程</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.eggjs.org/zh-CN/intro/quickstart"><i class='fas fa-fw fa-bookmark'></i>— Egg.js 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.axios-http.cn/docs/intro"><i class='fas fa-fw fa-bookmark'></i>— Axios 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://v3.cn.vuejs.org/guide/introduction.html"><i class='fas fa-fw fa-bookmark'></i>— Vue.js 文档</a>
              </li>
          
        </ul>
      </section>
    

    
    <section id="prefooter">
      <hr/>
      <ul>
      

      
        <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> </a></li>
      
      </ul>
    </section>
    
    <section id="footer">
      <center>
    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download matcornic/hugo-theme-learn on GitHub">Download</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn" data-icon="octicon-star" data-show-count="true" aria-label="Star matcornic/hugo-theme-learn on GitHub">Star</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matcornic/hugo-theme-learn on GitHub">Fork</a>

    <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fas fa-heart"></i></a> from <a href="https://getgrav.org">Grav</a> and <a href="https://gohugo.io/">Hugo</a></p>
</center>

<script async defer src="https://buttons.github.io/buttons.js"></script>

    </section>
  </div>
</nav>




        <section id="body">
        <div id="overlay"></div>
        <div class="padding highlightable">
              
              <div>
                <div id="top-bar">
                
                  
                  
                  
                  <div id="top-github-link">
                    <a class="github-link" title='' href="https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/JavaScript/%e5%af%b9%e8%b1%a1%e6%8b%b7%e8%b4%9d/_index.zh.md" target="blank">
                      <i class="fas fa-code-branch"></i>
                      <span id="top-github-link-text"></span>
                    </a>
                  </div>
                  
                
                
                <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <span id="sidebar-toggle-span">
                        <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                          <i class="fas fa-bars"></i>
                        </a>
                    </span>
                  
                  <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
                  
                  <span class="links">
                 
                 
                    
          
          
            
            
          
          
            
            
          
          
            <a href='/'>LIWENYUN BLOG</a> > <a href='/javascript/'>— JavaScript</a> > JS对象拷贝
          
        
          
        
          
        
                 
                  </span>
                </div>
                
                    <div class="progress">
    <div class="wrapper">
<nav id="TableOfContents">
  <ul>
    <li><a href="#数据类型和内存">数据类型和内存</a>
      <ul>
        <li><a href="#栈内存和堆内存">栈内存和堆内存</a></li>
        <li><a href="#原始数据类型">原始数据类型：</a></li>
        <li><a href="#引用数据类型">引用数据类型：</a></li>
      </ul>
    </li>
    <li><a href="#对象拷贝">对象拷贝</a>
      <ul>
        <li><a href="#浅拷贝">浅拷贝：</a></li>
        <li><a href="#深拷贝">深拷贝</a></li>
        <li><a href="#json-拷贝">JSON 拷贝</a></li>
      </ul>
    </li>
    <li><a href="#完善循环递归拷贝函数">完善循环递归拷贝函数</a></li>
    <li><a href="#其他拷贝方法">其他拷贝方法</a>
      <ul>
        <li><a href="#浅拷贝-1">浅拷贝</a></li>
        <li><a href="#深拷贝-1">深拷贝</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>

                
              </div>
            </div>
            
        <div id="head-tags">
        
        </div>
        
        <div id="body-inner">
          
            <h1>
              
              JS对象拷贝
            </h1>
          

        



	<h2 id="数据类型和内存">数据类型和内存</h2>
<h3 id="栈内存和堆内存">栈内存和堆内存</h3>
<p>JS的内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。
其中栈存放变量，堆存放复杂对象，池存放常量，所以也叫常量池。</p>
<h3 id="原始数据类型">原始数据类型：</h3>
<p>原始数据类型共有6种：</p>
<ul>
<li>Sting</li>
<li>Number</li>
<li>Boolean</li>
<li>null</li>
<li>undefined</li>
<li>Symbol</li>
</ul>
<p>原始数据类型保存在栈内存中，因为基本数据类型占用空间小、大小固定，通过按值来访问，属于被频繁使用的数据。
需要注意的是闭包中的基本数据类型变量不保存在栈内存中，而是保存在堆内存中。</p>
<h3 id="引用数据类型">引用数据类型：</h3>
<p>Array,Function,Object&hellip;可以认为除了上文提到的基本数据类型以外，所有类型都是引用数据类型。
引用数据类型存储在堆内存中，因为引用数据类型占据空间大、大小不固定。
如果存储在栈中，将会影响程序运行的性能；
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。
当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
因此当我们要访问堆内存中的引用数据类型时，实际上我们首先是从变量中获取了该对象的地址指针， 然后再从堆内存中取得我们需要的数据。</p>
<p>先看两个小例子：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">b</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">a</span> ;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">20</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">a</span>);<span style="color:#75715e">//20
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">b</span>);<span style="color:#75715e">//10
</span></span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小明&#34;</span>};
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">b</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">a</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;小红&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">name</span>);<span style="color:#75715e">//小红
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">name</span>);<span style="color:#75715e">//小红
</span></span></span></code></pre></div><p>可见，对于原始数据类型，可以通过简单的赋值操作进行拷贝，但赋值操作无法完整地拷贝引用类型数据。</p>
<p>用vue做一个简单的小实例：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">submit</span>.<span style="color:#a6e22e">prevent</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;insert&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.name&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.age&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">添加</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item in list&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">姓名</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">name</span>}}
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">年龄</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">age</span>}}
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://unpkg.com/vue@next&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">createApp</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">student</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">list</span><span style="color:#f92672">:</span>[]
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">insert</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">list</span>.<span style="color:#a6e22e">push</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">student</span>)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p><img src="001.jpg" alt="">
<img src="002.jpg" alt=""></p>
<p>可见，当第二次录入小红的信息时，第一次录入的小明信息也发生改变了。
这是因为，插入列表的对象student没有进行拷贝，导致每次操作的都是同一个对象。</p>
<p>如何修正上一个实例呢？
答案自然是对象拷贝，简单来说就是让两个变量分别指向两个对象。</p>
<h2 id="对象拷贝">对象拷贝</h2>
<h3 id="浅拷贝">浅拷贝：</h3>
<p>通过遍历对象属性，将对象的属性分别拷贝到新对象里。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">obj</span><span style="color:#f92672">=</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小明&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#ae81ff">2</span>
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span>{};
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">obj</span>.<span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;小红&#34;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">obj</span>.<span style="color:#a6e22e">name</span>);<span style="color:#75715e">//小红
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">consol</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">newObj</span>.<span style="color:#a6e22e">name</span>);<span style="color:#75715e">//小明
</span></span></span></code></pre></div><p>封装一个浅拷贝函数：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">shallowCopy</span>(<span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span>{};
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newObj</span>;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>再回过头来解决vue实例的问题</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">submit</span>.<span style="color:#a6e22e">prevent</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;insert&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.name&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.age&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">添加</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item in list&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">姓名</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">name</span>}}
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">年龄</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">age</span>}}
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://unpkg.com/vue@next&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">createApp</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">student</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">list</span><span style="color:#f92672">:</span>[]
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">insert</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//讲push进数组list的对象修改为拷贝后的student对象。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">list</span>.<span style="color:#a6e22e">push</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">shallowCopy</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">student</span>))
</span></span><span style="display:flex;"><span>        }<span style="color:#960050;background-color:#1e0010">，</span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">shallowCopy</span>(<span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span>{};
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newObj</span>;
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p><img src="003.jpg" alt=""></p>
<h3 id="深拷贝">深拷贝</h3>
<p>再让vue实例里的student对象更复杂一点：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">submit</span>.<span style="color:#a6e22e">prevent</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;insert&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.name&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.age&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.girlfriend.name&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">添加</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item in list&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">姓名</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">name</span>}}
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">年龄</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">age</span>}}
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">女朋友</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">girlfriend</span>.<span style="color:#a6e22e">name</span>}}
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://unpkg.com/vue@next&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">createApp</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">student</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">girlfrieng</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">list</span><span style="color:#f92672">:</span>[]
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">insert</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//讲push进数组list的对象修改为拷贝后的student对象。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">list</span>.<span style="color:#a6e22e">push</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">shallowCopy</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">student</span>))
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">shallowCopy</span>(<span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span>{};
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newObj</span>;
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p><img src="004.jpg" alt="">
<img src="005.jpg" alt=""></p>
<p>发现，当对象student里还包含一个对象的时候，浅拷贝就无法拷贝所包含的对象了。</p>
<p>为解决上述遇到的问题，就要用到深拷贝了，核心思想就是递归。</p>
<p>先通过一个简单的累加计算理解递归（即自己调用自己）</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">fun</span>(<span style="color:#a6e22e">n</span>){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">n</span><span style="color:#f92672">===</span><span style="color:#ae81ff">1</span>){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> <span style="color:#ae81ff">1</span>;
</span></span><span style="display:flex;"><span>    }<span style="color:#66d9ef">else</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">n</span><span style="color:#f92672">+</span><span style="color:#a6e22e">fun</span>(<span style="color:#a6e22e">n</span><span style="color:#f92672">-</span><span style="color:#ae81ff">1</span>)
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fun</span>(<span style="color:#ae81ff">1</span>))<span style="color:#75715e">//1
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fun</span>(<span style="color:#ae81ff">2</span>))<span style="color:#75715e">//2+fun(1)=2+1=3
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fun</span>(<span style="color:#ae81ff">3</span>))<span style="color:#75715e">//3+fun(2)+fun(1)=3+2+1=6
</span></span></span></code></pre></div><p>通过递归实现深拷贝：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">student1</span><span style="color:#f92672">=</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小明&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;11&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">girlfriend</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小花&#34;</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">deepCopy</span>(<span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span>{};
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">//判断对象obj的属性里有没有对象
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>] <span style="color:#66d9ef">instanceof</span> Object){
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">deepcopy</span>(<span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>]);
</span></span><span style="display:flex;"><span>        }<span style="color:#66d9ef">else</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    };
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newObj</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">student2</span><span style="color:#f92672">=</span><span style="color:#a6e22e">deepCopy</span>(<span style="color:#a6e22e">student1</span>);
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">student1</span>.<span style="color:#a6e22e">girlfriend</span>.<span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;小丽&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">student1</span>.<span style="color:#a6e22e">girlfriend</span>.<span style="color:#a6e22e">name</span>);<span style="color:#75715e">//小丽
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">student2</span>.<span style="color:#a6e22e">girlfriend</span>.<span style="color:#a6e22e">name</span>);<span style="color:#75715e">//小花
</span></span></span></code></pre></div><p>再次改进vue实例：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">submit</span>.<span style="color:#a6e22e">prevent</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;insert&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.name&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.age&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student.girlfriend.name&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">添加</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item in list&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">姓名</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">name</span>}}
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">年龄</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">age</span>}}
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">女朋友</span><span style="color:#f92672">:</span>{{<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">girlfriend</span>.<span style="color:#a6e22e">name</span>}}
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://unpkg.com/vue@next&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">createApp</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">student</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">girlfrieng</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">list</span><span style="color:#f92672">:</span>[]
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">insert</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//讲push进数组list的对象修改为拷贝后的student对象。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">list</span>.<span style="color:#a6e22e">push</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">deepCopy</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">student</span>))
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">deepCopy</span>(<span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span>{};
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>                <span style="color:#75715e">//判断对象obj的属性里有没有对象
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>                <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>] <span style="color:#66d9ef">instanceof</span> Object){
</span></span><span style="display:flex;"><span>                    <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">deepCopy</span>(<span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>]);
</span></span><span style="display:flex;"><span>                }<span style="color:#66d9ef">else</span>{
</span></span><span style="display:flex;"><span>                    <span style="color:#a6e22e">newObj</span>[<span style="color:#a6e22e">i</span>]<span style="color:#f92672">=</span><span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">i</span>];
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>            };
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newObj</span>;
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p><img src="006.jpg" alt=""></p>
<h3 id="json-拷贝">JSON 拷贝</h3>
<p>测试举例：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">student1</span><span style="color:#f92672">=</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小明&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#ae81ff">2</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">girlfriend</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小花&#34;</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">str</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">student1</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">obj</span><span style="color:#f92672">=</span><span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">str</span>);
</span></span></code></pre></div><p>封装一个JSON拷贝函数：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">jsoncopy</span>(<span style="color:#a6e22e">obj</span>){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">str</span><span style="color:#f92672">=</span><span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">obj</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span><span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">str</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">newObj</span>;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>或者直接一行代码搞定：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">newObj</span><span style="color:#f92672">=</span><span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">obj</span>));
</span></span></code></pre></div><p>但是这种方式存在弊端，会忽略undefined、symbol和函数：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">obj</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;A&#39;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name1</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">undefined</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name3</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">function</span>() {},
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">name4</span><span style="color:#f92672">:</span>  <span style="color:#a6e22e">Symbol</span>(<span style="color:#e6db74">&#39;A&#39;</span>)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">obj2</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">obj</span>));
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">obj2</span>); <span style="color:#75715e">// {name: &#34;A&#34;}
</span></span></span></code></pre></div><h2 id="完善循环递归拷贝函数">完善循环递归拷贝函数</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">deepClone</span>(<span style="color:#a6e22e">obj</span>, <span style="color:#a6e22e">hash</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">WeakMap</span>()) {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">obj</span> <span style="color:#f92672">===</span> <span style="color:#66d9ef">null</span>) <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">obj</span>; <span style="color:#75715e">// 如果是null或者undefined我就不进行拷贝操作
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">obj</span> <span style="color:#66d9ef">instanceof</span> Date) <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> Date(<span style="color:#a6e22e">obj</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">obj</span> <span style="color:#66d9ef">instanceof</span> RegExp) <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> RegExp(<span style="color:#a6e22e">obj</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">// 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">obj</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;object&#34;</span>) <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">obj</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">// 是对象的话就要进行深拷贝
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">hash</span>.<span style="color:#a6e22e">get</span>(<span style="color:#a6e22e">obj</span>)) <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">hash</span>.<span style="color:#a6e22e">get</span>(<span style="color:#a6e22e">obj</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">cloneObj</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">obj</span>.<span style="color:#a6e22e">constructor</span>();
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">// 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#a6e22e">hash</span>.<span style="color:#a6e22e">set</span>(<span style="color:#a6e22e">obj</span>, <span style="color:#a6e22e">cloneObj</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">key</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">obj</span>) {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">obj</span>.<span style="color:#a6e22e">hasOwnProperty</span>(<span style="color:#a6e22e">key</span>)) {
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// 实现一个递归拷贝
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#a6e22e">cloneObj</span>[<span style="color:#a6e22e">key</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">deepClone</span>(<span style="color:#a6e22e">obj</span>[<span style="color:#a6e22e">key</span>], <span style="color:#a6e22e">hash</span>);
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">cloneObj</span>;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h2 id="其他拷贝方法">其他拷贝方法</h2>
<h3 id="浅拷贝-1">浅拷贝</h3>
<h4 id="objectassign">Object.assign</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">obj</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">18</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">nature</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;smart&#39;</span>, <span style="color:#e6db74">&#39;good&#39;</span>],
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">names</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">name1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;fx&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">name2</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;xka&#39;</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">love</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">function</span> () {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;fx is a great girl&#39;</span>)
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">newObj</span> <span style="color:#f92672">=</span> Object.<span style="color:#a6e22e">assign</span>({}, <span style="color:#a6e22e">fxObj</span>);
</span></span></code></pre></div><h4 id="slice">slice()</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fxArr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#34;One&#34;</span>, <span style="color:#e6db74">&#34;Two&#34;</span>, <span style="color:#e6db74">&#34;Three&#34;</span>]
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fxArrs</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">fxArr</span>.<span style="color:#a6e22e">slice</span>(<span style="color:#ae81ff">0</span>)
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">fxArrs</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;love&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fxArr</span>) <span style="color:#75715e">// [&#34;One&#34;, &#34;Two&#34;, &#34;Three&#34;]
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fxArrs</span>) <span style="color:#75715e">// [&#34;One&#34;, &#34;love&#34;, &#34;Three&#34;]
</span></span></span></code></pre></div><h4 id="concat">concat()</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fxArr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#34;One&#34;</span>, <span style="color:#e6db74">&#34;Two&#34;</span>, <span style="color:#e6db74">&#34;Three&#34;</span>]
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fxArrs</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">fxArr</span>.<span style="color:#a6e22e">concat</span>()
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">fxArrs</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;love&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fxArr</span>) <span style="color:#75715e">// [&#34;One&#34;, &#34;Two&#34;, &#34;Three&#34;]
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fxArrs</span>) <span style="color:#75715e">// [&#34;One&#34;, &#34;love&#34;, &#34;Three&#34;]
</span></span></span></code></pre></div><h4 id="拓展运算符">拓展运算符</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fxArr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#34;One&#34;</span>, <span style="color:#e6db74">&#34;Two&#34;</span>, <span style="color:#e6db74">&#34;Three&#34;</span>]
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fxArrs</span> <span style="color:#f92672">=</span> [...<span style="color:#a6e22e">fxArr</span>]
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">fxArrs</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;love&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fxArr</span>) <span style="color:#75715e">// [&#34;One&#34;, &#34;Two&#34;, &#34;Three&#34;]
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">fxArrs</span>) <span style="color:#75715e">// [&#34;One&#34;, &#34;love&#34;, &#34;Three&#34;]
</span></span></span></code></pre></div><h3 id="深拷贝-1">深拷贝</h3>
<h4 id="_clonedeep">_.cloneDeep()</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">_</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;lodash&#39;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">obj1</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">a</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">b</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">f</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">g</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span> } },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> [<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">3</span>]
</span></span><span style="display:flex;"><span>};
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">obj2</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">_</span>.<span style="color:#a6e22e">cloneDeep</span>(<span style="color:#a6e22e">obj1</span>);
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">obj1</span>.<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">f</span> <span style="color:#f92672">===</span> <span style="color:#a6e22e">obj2</span>.<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">f</span>);<span style="color:#75715e">// false
</span></span></span></code></pre></div><h4 id="jqueryextend">jQuery.extend()</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">$</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;jquery&#39;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">obj1</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">a</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">b</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">f</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">g</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span> } },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> [<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">3</span>]
</span></span><span style="display:flex;"><span>};
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">obj2</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">extend</span>(<span style="color:#66d9ef">true</span>, {}, <span style="color:#a6e22e">obj1</span>);
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">obj1</span>.<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">f</span> <span style="color:#f92672">===</span> <span style="color:#a6e22e">obj2</span>.<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">f</span>); <span style="color:#75715e">// false
</span></span></span></code></pre></div>




<footer class=" footline" >
	
</footer> 

         
        </div>
        

      </div>

    <div id="navigation">
        
        

        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
            
        

        


	 
	 
		
			<a class="nav nav-prev" href="/javascript/ajax/" title="Ajax简单介绍"> <i class="fa fa-chevron-left"></i></a>
		
		
			<a class="nav nav-next" href="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/" title="JS中的内存机制" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
		
	
    </div>

    </section>

    <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
      <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
    </div>
    <script src="/js/clipboard.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.jquery.min.js?1648731304"></script>
    <script src="/js/jquery.sticky.js?1648731304"></script>
    <script src="/js/featherlight.min.js?1648731304"></script>
    <script src="/js/highlight.pack.js?1648731304"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="/js/modernizr.custom-3.6.0.js?1648731304"></script>
    <script src="/js/learn.js?1648731304"></script>
    <script src="/js/hugo-learn.js?1648731304"></script>
    
        
            <script src="https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"></script>
        
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>
    
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-105947713-1', 'auto');
  ga('send', 'pageview');

</script>
  </body>
</html>
 